<template>
  <div class="topic-course-container">


    <!--侧边栏-->
    <div class="side">
      <Anchor show-ink
              :bounds="200"
              @on-select="onSelect"
              @on-change="onChange">
        <AnchorLink :scroll-offset="200"
                    v-bind:href="'#'+ obj.topicId"
                    :title="obj.topicName"
                    v-for="(obj,i) in topicList"
                    :key="obj.topicId"/>

      </Anchor>
    </div>

    <div class="content">
      <div v-for="(obj,i) in topicList"
           :key="obj.topicId"
           :class="{'c-box':true,'currentTab':currentTab==obj.topicId}"
           :id="obj.topicId">

        <!--课程列表盒子-->
        <div class="t">
          <div class="topic-header">
            <div style="padding-top:4px;padding-right: 10px">
              <IconAli :sty="{width:'42px',height:'42px'}" icon='topic'></IconAli>
            </div>
            <!--            专栏:-->


            <Poptip word-wrap
                    trigger="hover"
                    placement="right"
                    :content="obj.topicDesc==undefined?'建议按照顺序观看':obj.topicDesc">
              <span style="color:#000;"> {{ obj.topicName }}</span>
            </Poptip>

          </div>

          <div class="c-list">
            <CourseList :topicId="obj.topicId"></CourseList>
          </div>
          <!--            <div style="height: 10px;"></div>-->
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseList from "@/components/course/CourseList"

export default {
  //组件名称
  name: "TopicCourse",
  props: [],
  //组件注册
  components: {
    IconAli,
    CourseList
  },
  //数据驱动
  data() {
    return {
      topicList: [],    //列表
      courseTopic: {},  //详细信息
      currentTab: ""
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //点击锚点时触发，返回链接
    onSelect(href) {
      href = href.substr(1, href.length - 1);
      this.currentTab = href;
      //保存到 store
      this.$store.dispatch('asyncSetCurrentTopic', this.currentTab)
    },
    //链接改变时触发，返回新链接和旧链接
    onChange(newHref, oldHref) {
      let href = newHref.substr(1, newHref.length - 1);
      this.currentTab = href;
      //保存到 store
      this.$store.dispatch('asyncSetCurrentTopic', this.currentTab)
    },
    //根据id查询详细信息
    selectCourseListByTopicId() {
      if (this.currentTab.trim() != "") {
        this.axios.get(`/course/web/topic/${this.currentTab}`)
            .then((data) => {
              this.courseTopic = data.data
            })
      }
    },
    //查询主题分类
    selectTopicList() {
      this.axios.get("/course/web/topic/list")
          .then((data) => {
            this.topicList = data.data
          })
    },
    //查询所有主题和课程
    selectTopicAndCourseList() {
      this.axios.get("/course/web/topic-course-list")
          .then((data) => {
          })
    }
  },
  //钩子函数
  created() {
    this.selectTopicList();
    // this.selectTopicAndCourseList();
    this.selectCourseListByTopicId();

    this.currentTab = this.$store.getters.getCurrentTopic
    this.$router.replace({
      "hash": this.currentTab
    })
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.topic-course-container {
  /*min-width: 1200px;
  width: 80%;
  margin: 0px auto;
  padding-bottom: 60px;*/

  .side {
    position: fixed;
    left: 1%;
    top: 100px;
    max-width: 120px;
    border-radius: 6px;

    /deep/ .ivu-anchor-link {
      //height: 28px;
      //line-height: 28px;
      //padding: 0px 0px 0px 10px;
      font-size: 14px;
      text-align: left;
      vertical-align: middle;
      margin-top: 2px;

      overflow: hidden;
      border-radius: 3px;
      background-color: #FDFDFD;
    }

    .tab {
      margin-top: 2px;
      overflow: hidden;
      height: 24px;
      line-height: 24px;
      border-radius: 3px;
      background-color: #FDFDFD;
    }

    /deep/ .ivu-anchor-link-active {
      font-weight: bolder;
      color: #000 !important;
    }

    .now {
      font-weight: bolder;
      color: #FFF !important;
      //background-color: #33aff3;
      background-color: #f3ba95;
      //background-color: #f58282;
      a {
        color: #000 !important;
      }
    }
  }

  .content {
    //padding-bottom: 10px;
    min-width: 1200px;
    width: 80%;
    margin: 0px auto;
    padding-bottom: 60px;

    .t {
      //border:1px solid #000000;
      border-radius: 6px;
      padding-top: 8px;
      padding-bottom: 16px;
      margin-bottom: 10px;
    }

    .currentTab {
      border-radius: 6px;
      //background-color: #b7d8ea;
      //box-shadow: 1px 1px 4px 2px #ef1c5f !important;
      //box-shadow: 1px 1px 4px 2px #f5ad7e !important;
      box-shadow: 1px 1px 4px 2px #777 !important;
      top: 120px;
      z-index: 1000;
    }

    .topic-header {
      //background-color: #f5ad7e;
      height: 50px;
      line-height: 50px;
      font-weight: bolder;
      font-size: 20px;
      padding-left: 10px;
      color: #444;
      display: flex;
      border-radius: 2px;
    }


    .c-list { //课程列表
      margin: 10px 0px 0px 0px;
    }
  }

  /deep/ .ivu-poptip-body-content-inner {
    color: #333;
    font-weight: normal;
  }
}
</style>